// 获取学院列表数据，并渲染到表格
function renderStudent() {
  axios({
    url: '/students',
    // headers: {
    //   Authorization:localStorage.getItem('token')
    // }
  }).then(result => {
    // console.log(res)
     let newArr = result.data.data.map(item => {
      return `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender ? '女' : '男'}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province} ${item.city} ${item.area}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${tiem.id}></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
          </td>
        </tr>
      `
    })
    document.querySelector('tbody').innerHTML = newArr.join('')   
  })
}
renderStudent()

// -----------------------------省市县联动------------------------
let sheng = '<option value="">--省份--</option>'
let shi = '<option value="">--城市--</option>'
let xian ='<option value="">--地区--</option>'
//下拉框
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')


// 获取省，并渲染
axios({
  url:'/api/province'
}).then(result => {
  let newArr = result.data.data.map(item => 
    `<option value="${item}">${item}</option>`)
  province.innerHTML=sheng+newArr.join('')
  
})

// 省切换的时候，获取市，并渲染
province.addEventListener('change', function () {
  // console.log(province.value)
  area.innerHTML = xian // 切换省的时候，重置区县
  axios({
    url: '/api/city',
    params: {
      pname:province.value
    }
  }).then(result => {
    // console.log(result)
    let newArr=result.data.data.map(item => 
      `<option value="${item}">${item}</option>`)
    city.innerHTML=shi+newArr.join('')
  })
})

// 市切换的时候，获取区县，并渲染
city.addEventListener('change', function () {
  // console.log(province.value)
  axios({
    url: '/api/area',
    params: {
      pname: province.value,
      cname:city.value
    }
  }).then(result => {
    // console.log(result)
    let newArr=result.data.data.map(item => 
      `<option value="${item}">${item}</option>`)
    area.innerHTML=xian+newArr.join('')
  })
})
//-------------------------=-- 添加学员----------------------
// 模态框盒子
let addModal=new bootstrap.Modal(document.querySelector('#modal'))

// 点击+的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {

  addModal.show()//让模态框显示
})
// 点击模态框中的 确认 按钮，让模态框隐藏
document.querySelector('#submit').addEventListener('click', function () {
//  获取表单各项的值
  // let data = val()
  let data = val(document.querySelector('#form'))
  // 检查是否是接口需要
  // console.log(data)
  data.age = +data.age
  data.group=+data.group
  data.gender=+data.gender
  data.hope_salary=+data.hope_salary
  data.salary=+ data.salary

   if (document.querySelector('.modal-title').innerHTML === '添加学员') {
        axios({
            url: '/students',
            method: 'post',
            data: data
        }).then(res => {
            // console.log(res)
            message.success(res.data.message) // 使用插件提示消息
            document.querySelector('#form').reset() // 重置表单
            renderStudent() // 更新页面数据
            addModal.hide() // 让模态框隐藏
        })
    }

    // 编辑
    if (document.querySelector('.modal-title').innerHTML === '修改学员') {
        const id = document.querySelector('.modal-title').dataset.id
        axios({
            url: `/students/${id}`,
            method: 'put',
            data: data
        }).then(res => {
            // console.log(res)
            message.success(res.data.message) // 使用插件提示消息
            document.querySelector('#form').reset() // 重置表单
            renderStudent() // 更新页面数据
            addModal.hide() // 让模态框隐藏
        })
    }
  // Ajax提交
  axios({
    method:'post',
    url: '/students',
    data:data
  }).then(result => {
    // console.log(result)
    message.success(result.data.message)
    document.querySelector('#form').reset()//重置表单
    renderStudent()// 更新页面数据
    addModal.hide() // 让模态框隐藏
  })
})

// 找到tbody注册点击事件，里面判断电机的是删除还是编辑
document.querySelector('tbody').addEventListener('click',async function (e) {
  // 判断点击的元素是否存在
  if (e.target.classList.contains('bi-trash')) {
    // console.log('你点击了删除')
    let id = e.target.dataset.id
    // 发送ajax请求进行删除
    axios({
      url: `/students/${id}`,
      method:'delete'
    }).then(result => {
      // console.log(result)
      message.success('删除成功')//提示
      renderStudent()
      
    })
  }
  if (e.target.classList.contains('bi-pen')) {
    // 说明点击了编辑
    // console.log('你点击了编辑')
    let id = e.target.dataset.id//获取编辑按钮的自定义属性值
    document.querySelector('modal-title').innerHTML = '修改学员'
    // 下面是设置模态框标题的自定义属性，值是当前修改的学员的id
    document.querySelector('modal-title').setAttribute('data-id', id)
    addModal.show()//显示模态框
    let result = await axios({ url: `/student/${id}` })
    console.log(result.data.data)//输出的是个人详细信息
    // 获取城市和县区，渲染到第2个和第3 个下拉框的位置
    let res1=axios({
      url: '/api/city',
      params: {
        pname:result.data.data.province
      }
    })
    let res2=axios({
      url: '/api/city',
      params: {
        pname:result.data.data.province
      }
    })
    console.log(res1)
    let newArr1 = res1.data.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML=shi+newArr1.join('')
    console.log(res2)
    let newArr2 = res1.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = xian + newArr2.join('')    
    // 做数据回填，继续使用插件【val（表单，数据】,关于这个代码，只是简化步骤 
    val(document.querySelector('#form'),result.data.data)
  }
})

// 退出
document.querySelector('#logout').addEventListener('click', function () {
    localStorage.removeItem('token')
    location.href = './login.html'
})
// ------------------------删除学员--------------------

// ------------------------编辑学员------------------*